<template>
	<view class="layout">
		<wd-navbar title="库存信息" left-text="返回" @click-left="uni.navigateBack" left-arrow />
		<wd-toast />
		
		<!-- 查询条件 -->
		<view class="search-container">
			<wd-cell-group border>
				<wd-cell title="小卷规格" :value="selectedRollSpec ? selectedRollSpec.model + ' - ' + selectedRollSpec.specification : '全部规格'" is-link @click="showRollSpecSelector" />
				<wd-cell title="仓库" :value="selectedWarehouse ? selectedWarehouse.warehouseName : '全部仓库'" is-link @click="showWarehouseSelector" />
			</wd-cell-group>
			
			<view class="button-container">
				<wd-button type="primary" size="large" @click="handleQuery" block>查询</wd-button>
			</view>
		</view>
		
		<!-- 库存信息列表 -->
		<view class="list-container" v-if="dataList.length > 0">
			<wd-card 
				v-for="(item, index) in dataList" 
				:key="index"
				class="info-card"
			>
				<view class="card-header">
					<text class="card-title">库存记录 {{ index + 1 }}</text>
				</view>
				<wd-cell-group border>
					<wd-cell title="仓库名称" :value="item.warehouseName || '-'" />
					<wd-cell title="产品型号" :value="item.model || '-'" />
					<wd-cell title="产品规格" :value="item.specification || '-'" />
					<wd-cell title="库存数量" :value="String(item.quantity || 0)" />
				</wd-cell-group>
			</wd-card>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else-if="hasQueried">
			<text class="empty-text">暂无库存信息</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { ProcessService } from '@/services';
	import { useToast } from '@/uni_modules/wot-design-uni';
	
	const toast = useToast();
	
	// 数据列表
	const dataList = ref([]);
	const hasQueried = ref(false);
	
	// 小卷规格列表
	const rollSpecList = ref([]);
	const selectedRollSpec = ref(null);
	
	// 仓库列表
	const warehouseList = ref([]);
	const selectedWarehouse = ref(null);
	
	// 查询参数
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		smallRollId: '',
		warehouseId: ''
	});
	
	// 加载小卷规格列表
	const loadRollSpecList = async () => {
		try {
			const response = await ProcessService.getSmallRollSpecList();
			if (response && response.code === 200) {
				rollSpecList.value = response.rows || [];
			}
		} catch (error) {
			console.error('加载小卷规格失败:', error);
			toast.error('加载小卷规格失败');
		}
	};
	
	// 加载仓库列表
	const loadWarehouseList = async () => {
		try {
			const response = await ProcessService.getWarehouseList();
			if (response && response.code === 200) {
				warehouseList.value = response.rows || [];
			}
		} catch (error) {
			console.error('加载仓库列表失败:', error);
			toast.error('加载仓库列表失败');
		}
	};
	
	// 显示小卷规格选择器
	const showRollSpecSelector = () => {
		if (rollSpecList.value.length === 0) {
			toast.error('暂无可选择的小卷规格');
			return;
		}
		
		// 添加"全部规格"选项
		const itemList = ['全部规格', ...rollSpecList.value.map(item => `${item.model} - ${item.specification}`)];
		
		uni.showActionSheet({
			itemList: itemList,
			success: (res) => {
				if (res.tapIndex === 0) {
					// 选择了"全部规格"
					selectedRollSpec.value = null;
					queryParams.value.smallRollId = '';
				} else {
					selectedRollSpec.value = rollSpecList.value[res.tapIndex - 1];
					queryParams.value.smallRollId = rollSpecList.value[res.tapIndex - 1].smallRollId;
				}
			},
			fail: function (err) {
				console.error('显示选择器失败:', err);
			}
		});
	};
	
	// 显示仓库选择器
	const showWarehouseSelector = () => {
		if (warehouseList.value.length === 0) {
			toast.error('暂无可选择的仓库');
			return;
		}
		
		// 添加"全部仓库"选项
		const itemList = ['全部仓库', ...warehouseList.value.map(item => item.warehouseName)];
		
		uni.showActionSheet({
			itemList: itemList,
			success: (res) => {
				if (res.tapIndex === 0) {
					// 选择了"全部仓库"
					selectedWarehouse.value = null;
					queryParams.value.warehouseId = '';
				} else {
					selectedWarehouse.value = warehouseList.value[res.tapIndex - 1];
					queryParams.value.warehouseId = warehouseList.value[res.tapIndex - 1].id;
				}
			},
			fail: function (err) {
				console.error('显示选择器失败:', err);
			}
		});
	};
	
	// 查询库存信息
	const handleQuery = async () => {
		try {
			uni.showLoading({
				title: '查询中...',
				mask: true
			});
			
			const response = await ProcessService.getInventorySummaryList(queryParams.value);
			
			uni.hideLoading();
			hasQueried.value = true;
			
			if (response && response.code === 200) {
				dataList.value = response.rows || [];
				
				if (dataList.value.length === 0) {
					toast.info('暂无库存信息');
				} else {
					toast.success('查询成功');
				}
			} else {
				toast.error(response?.msg || '查询失败');
				dataList.value = [];
			}
		} catch (error) {
			uni.hideLoading();
			hasQueried.value = true;
			toast.error('查询失败，请检查网络');
			console.error('查询库存信息失败:', error);
			dataList.value = [];
		}
	};
	
	// 页面加载时获取选择器数据
	onMounted(() => {
		loadRollSpecList();
		loadWarehouseList();
	});
</script>

<style scoped>
	.layout {
		padding: 16rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.search-container {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.button-container {
		padding: 32rpx;
	}
	
	.list-container {
		margin-top: 20rpx;
	}
	
	.info-card {
		margin-bottom: 20rpx;
	}
	
	.card-header {
		padding: 20rpx;
		background-color: #f8f8f8;
		border-bottom: 1px solid #eee;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>
